<template>
  <TopNav title="营养订餐"/>
  <div class="container">
    <el-card>
      <el-form class="form" :model="addFormInfo" label-width="50px">
        <el-form-item label="时间">
          <el-date-picker value-format="x" type="date" v-model="addFormInfo.orderTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="餐型">
          <el-input style="width: 80%" v-model="addFormInfo.mealType"></el-input>
        </el-form-item>
        <el-form-item label="患者" style="width: 300px">
          <el-select v-model="addFormInfo.patientId">
            <el-option v-for="item in patientList.list" :key="item.patientId"
                       :label="item.patientName"
                       :value="item.patientId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="餐食" style="width: 300px">
          <el-select v-model="addFormInfo.mealId">
            <el-option v-for="item in mealList.list" :key="item.mealId"
                       :label="item.mealName"
                       :value="item.mealId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button @click="sureHandler" class="button" type="success" round>预定</el-button>
    </el-card>
  </div>
</template>

<script setup>
import {useDataStore} from "@/stores/dataStore.js";
import {useRoute, useRouter} from 'vue-router'
import TopNav from "@/components/TopNav/Back.vue"
import mealAxios from "@/api/meal.js"
import patientAxios from "@/api/patient.js"
import {onMounted, reactive} from "vue";

const route = useRoute()
//route.params.name;
const router = useRouter()
const dataStore = useDataStore()
//初始化分页查询数据
const patientList = reactive({
  list: []
})
const mealList = reactive({
  list: []
})
//初始化添加对话框状态
const addFormInfo = reactive({
  orderTime: "",
  patientId: "",
  mealId: "",
  mealType: "",
})
onMounted(() => {
  patientAxios.patient_findAll().then(res => {
    if (res.data.code == 200) {
      patientList.list = res.data.data
    }
  })
  mealAxios.meal_findAll().then(res => {
    if (res.data.code == 200) {
      mealList.list = res.data.data
    }
  })
})


/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  if(addFormInfo.orderTime==""||addFormInfo.patientId==""||addFormInfo.mealId==""||addFormInfo.mealType==""){
    ElMessage.error("请填写完整信息")
  }else {
    mealAxios.mealRecord_add({
      orderTime: addFormInfo.orderTime,
      patientId: addFormInfo.patientId,
      mealId: addFormInfo.mealId,
      mealType: addFormInfo.mealType,
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage.success("订餐成功")
        router.push("/work/index")
      } else {
        ElMessage.error(res.data.message)
      }
    })
  }
}
</script>

<style scoped lang="scss">
.container {
  padding-top: 150px;
  height: 450px;
  background-image: url("https://img2.baidu.com/it/u=2671696086,4012471856&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750");
  background-size: cover;
}

.form {
  padding-left: 20px;
}

.button {
  margin-left: 10%;
  width: 80%;
}
</style>
